<template>
  <div class="container">
    <el-container>
      <!-- 头部 -->
      <el-header>
        <header-bar></header-bar>
      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px">
          <el-scrollbar class="page-scroll">
              <el-menu
                :default-active="activeMenu"
                @select="handleSelect"
                router
                >
                <el-menu-item
                  v-for="item in findMusicList"
                  :key="item.path"
                  :index="item.path"
                  :disabled="item.loginRequired && !isLogin"
                >
                  {{ item.title }}
                </el-menu-item>
                <el-menu-item-group>
                  <template slot="title">我的音乐</template>
                  <el-menu-item
                    v-for="item in myMusicList"
                    :key="item.path"
                    :index="item.path"
                    :disabled="item.loginRequired && !isLogin"
                  >
                    {{ item.title }}
                  </el-menu-item>
                </el-menu-item-group>

                <el-menu-item-group v-if="isLogin">
                  <template slot="title">创建的歌单</template>
                  <!-- 歌单的地址后面是歌单id -->
                  <el-menu-item
                    :index="'/playListDetail/' + item.id"
                    v-for="(item, index) in personalList"
                    :key="item.id"
                    class="text-hidden"
                  >
                    <i class="iconfont icon-aixin" v-if="index === 0"></i>
                    <i class="iconfont icon-gedan" v-else></i>
                    {{ item.name }}
                    <!-- <span slot="title">自己的v-for</span>跟直接写没区别啊,怎么回事 -->
                  </el-menu-item>
                </el-menu-item-group>

                <el-menu-item-group v-if="isLogin">
                  <template slot="title">收藏的歌单</template>
                  <el-menu-item
                    :index="'/playListDetail/' + item.id"
                    v-for="item in subList"
                    :key="item.id"
                    class="text-hidden"
                  >
                    <i class="iconfont icon-gedan"></i>{{ item.name }}
                  </el-menu-item>
                </el-menu-item-group>

              </el-menu>
            </el-scrollbar>
        </el-aside>
        <el-main ref="el_main">
          <router-view></router-view>
        </el-main>
      </el-container>
      <!-- 底栏播放栏 -->
      <footer-bar></footer-bar>
    </el-container>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import HeaderBar from '@/components/HeaderBar/headerBar.vue'
import FooterBar from '@/components/FooterBar/footerBar.vue'
export default {
  data () {
    return {
      // 搜索框绑定数据
      searchData: '',
      // 默认激活的菜单的index,我这里是使用/balabala作为index
      activeMenu: '',
      // type为0代表是发现音乐下面那几个,为1是我的音乐下面那几项,loginRequired表示是否需要登录,用于没登录就禁用菜单项
      menuList: [
        { path: '/personalRecom', title: '发现音乐', type: 0, loginRequired: false },
        { path: '/videoMenu', title: '视频', type: 0, loginRequired: true },
        // { path: '/', title: '私人FM', type: 0, loginRequired: true },
        { path: '/dailyRecom', title: '每日推荐', type: 1, loginRequired: true },
        { path: '/historyPlay', title: '最近播放', type: 1, loginRequired: false },
        { path: '/subscribe', title: '我的收藏', type: 1, loginRequired: true }
      ]
    }
  },
  created () {
    // 获取歌单
    this.$store.dispatch('getPlayList', this.$store.state.profile.userId)
    // 获取被激活菜单,
    this.activeMenu = window.sessionStorage.getItem('activePath') || '/personalRecom'
  },
  components: {
    HeaderBar,
    FooterBar
  },
  computed: {
    /* vuex中登录相关信息 */
    ...mapState(['isLogin', 'account', 'profile', 'playList']),
    // 侧栏发现音乐菜单下的那几项
    findMusicList () {
      return this.menuList.filter(item => item.type === 0)
    },
    // 侧栏我的音乐菜单下的那几项
    myMusicList () {
      return this.menuList.filter(item => item.type === 1)
    },
    // 自己创建的歌单,先检查一些playlist存不存在
    personalList () {
      return this.playList ? this.playList.filter(item => item.userId === this.profile.userId) : []
    },
    // 收藏的歌单,先检查一些playlist存不存在,不然filter会报错Cannot read properties of undefined (reading 'filter')
    subList () {
      return this.playList ? this.playList.filter(item => item.userId !== this.profile.userId) : []
    }
  },
  methods: {
    // 菜单打开
    handleSelect (index) {
      window.sessionStorage.setItem('activePath', index)
    }
  }
}
</script>

<style lang="less">
@import '../assets/less/lessConfig.less';
.container {
  width: 100%;
  height: 100%;
}
.el-header {
  position: relative;
  width: 100%;
  height: 60px;
}
// 滚动条
.page-scroll {
  height: 100%;
}
.page-scroll .el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-aside {
  display: block;
  position: absolute;
  left: 0;
  top: 60px;
  bottom: 0;
  // background-color: green;
}
.el-main {
  position: absolute;
  left: 200px;
  right: 0;
  top: 60px;
  bottom: 0;
  // background-color: #eeaabb;
  // overflow-y: scroll;加不加都一样,el-main自带overflow:auto
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      box-shadow: inset 0 0 3px #e0e0e0;
      background-color: #e0e0e0;
  }
}
.el-menu-item {
  text-align: left;
  height: 40px !important;
  line-height: 40px !important;

}
.el-menu-item-group__title  {
  text-align: left;
}
.el-menu-item.is-active {
    font-size: 15px;
    font-weight: bold;
    color: #303133 !important;
    background-color: #f6f6f7;
}
</style>
